import React, { PureComponent } from "react";
import {
  Text,
  View,
  Image,
  TextInput,
  Alert,
  Platform,
  TouchableOpacity,
  Keyboard,
  StyleSheet
} from "react-native";
import {
  statusBarHeight,
  safeAreaBottomHeight,
  LoginToken,
  screenHeight
} from "../../../util/AdapterUtil";
import NavigationService from "../../../components/NavigationService";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import actions from "../../../models/actions";
import { connect } from "react-redux";
import NavigationBar from "../../../components/navigationBar";
import * as requestApi from "../../../util/requestApi";
import MD5 from "react-native-md5";
import image from "../../../assets/image";

class ResetPassword extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      password1: "",
      password2: "",
      isVisible1: false,
      isVisible2: false,
    };
  }
  componentWillUnmount() {}
  componentDidMount() {}

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <NavigationBar
          navigation={this.props.navigation}
          isBack={true}
          isDrawer={() => {
            NavigationService.navigate("login");
          }}
        />
        <KeyboardAwareScrollView>
          <TouchableOpacity
            onPress={this.hiddenKeyborad.bind(this)}
            activeOpacity={1}
            style={{
              height:
                screenHeight - safeAreaBottomHeight - statusBarHeight - 44 - 10
            }}
          >
            <Text
              style={{
                color: "#202020",
                marginTop: 32,
                fontSize: 35,
                fontWeight: "bold",
                marginLeft: 15
              }}
            >
              找回密码
            </Text>
            <View
              style={{
                backgroundColor: "#fff",
                flexDirection: "row",
                height: 60,
                marginTop: 35,
                paddingLeft: 20,
                paddingRight: 15,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <TextInput
                style={{
                  padding: 0,
                  color: "#202020",
                  fontSize: 16,
                  flex: 1,
                  height: 40,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                placeholder={"请输入新密码"}
                secureTextEntry={!this.state.isVisible1}
                selectionColor={"#4A90E2"}
                maxLength={16}
                value={this.state.password1}
                onChangeText={text => {
                  if (this.isPassword(text)) {
                    Toast.show("密码只能输入字母和数字", 500);
                  }
                  let newtext = text.replace(/[^\da-zA-Z]+/, "");
                  if (text != null && text.length >= 16) {
                    Toast.show("密码不能超过16个字符", 1000);
                  } else {
                    this.setState({
                      password1: newtext
                    });
                  }
                }}
              />
              <TouchableOpacity
                onPress={() => {
                  this.setState({
                    isVisible1: !this.state.isVisible1
                  });
                }}
              >
                <Image
                  style={{ marginLeft: 20, padding: 0, width: 20, height: 20 }}
                  source={
                    this.state.isVisible1 ? image.ic_visible : image.ic_invisible
                  }
                />
              </TouchableOpacity>
            </View>

            <View
              style={{
                height: 1,
                backgroundColor: "#ccc",
                transform: [{ scaleY: 0.5 }]
              }}
            />

            <View
              style={{
                backgroundColor: "#fff",
                flexDirection: "row",
                height: 60,
                paddingLeft: 20,
                paddingRight: 15,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <TextInput
                style={{
                  padding: 0,
                  color: "#202020",
                  fontSize: 16,
                  flex: 1,
                  height: 40,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                placeholder={"请再次输入新密码"}
                secureTextEntry={!this.state.isVisible2}
                selectionColor={"#4A90E2"}
                maxLength={16}
                value={this.state.password2}
                onChangeText={text => {
                  if (this.isPassword(text)) {
                    Toast.show("密码只能输入字母和数字", 500);
                  }
                  let newtext = text.replace(/[^\da-zA-Z]+/, "");
                  if (text != null && text.length >= 16) {
                    Toast.show("密码不能超过16个字符", 1000);
                  } else {
                    this.setState({
                      password2: newtext
                    });
                  }
                }}
              />
              <TouchableOpacity
                onPress={() => {
                  this.setState({
                    isVisible2: !this.state.isVisible2
                  });
                }}
              >
                <Image
                  style={{ marginLeft: 20, padding: 0, width: 20, height: 20 }}
                  source={
                    this.state.isVisible2 ? image.ic_visible : image.ic_invisible
                  }
                />
              </TouchableOpacity>
            </View>

            <TouchableOpacity
              style={{
                marginTop: 30,
                marginLeft: 20,
                marginRight: 20,
                height: 45,
                borderRadius: 3,
                backgroundColor: "#3591FF",
                justifyContent: "center",
                alignItems: "center"
              }}
              onPress={this.resetPassword.bind(this)}
            >
              <Text style={{ color: "#fff", fontSize: 14 }}>下一步</Text>
            </TouchableOpacity>
          </TouchableOpacity>
        </KeyboardAwareScrollView>
        <View style={{ height: safeAreaBottomHeight }} />
      </View>
    );
  }

  hiddenKeyborad() {
    Keyboard.dismiss();
  }

  isPassword = password => {
    const reg = /[^\da-zA-Z]+/;
    return reg.test(password);
  };

  resetPassword() {
    let { password1, password2 } = this.state;
    let { vCode, phone } = this.props.navigation.state.params;
    if (password1.length < 8) {
      Toast.show("密码不能小于8位", 1000);
      return;
    }
    if (password2 !== password1) {
      Toast.show("2次密码不一致", 1000);
      return;
    }
    let sign1 = MD5.hex_md5(password1);
    let sign2 = MD5.hex_md5(password2);
    let params = {
      phone: phone,
      password: sign1,
      confirmPassword: sign2,
      verificationCore: vCode
    };
    requestApi
      .vCodeResetPassword(params)
      .then(res => {
        Toast.show("修改成功", 1000);
        NavigationService.navigate("login");
      })
      .catch(err => {
        Toast.show(err.msg, 1000);
      });
  }
}

const styles = StyleSheet.create({
  loginTitle: {
    marginLeft: 15,
    marginTop: 25,
    color: "#202020",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default connect(
  ({ userInfo }) => ({
    userInfo
  }),
  {
    getLoginToken: actions.getLoginToken
  }
)(ResetPassword);
